<script setup>
import {defineProps, defineEmits, reactive, computed} from "vue";

const dom = defineProps(['level', 'title', 'content', 'modelValue'])
const emit = defineEmits(['modelValue'])
const levelClass = reactive({0:'alert-primary',1:'alert-secondary',2:'alert-success',3:'alert-danger',
      4:'alert-warning',5:'alert-info',6:'alert-light',7:'alert-dark'})
function close() {
  emit('update:modelValue', false)
}

let bindingClass = computed(()=>{
   const className = levelClass[dom.level]||levelClass[2]
   return ' '+className+' '
})
</script>

<template>
  <div class="alert alert-dismissible fade show" :class="bindingClass" role="alert" v-if="dom.modelValue">
    <template v-if="dom.title">
      <strong>{{ dom.title }}</strong>
      <br/>
    </template>
    {{ dom.content }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" @click="close"></button>
  </div>
</template>

<style scoped>

</style>